<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>iosselect VUE</title>
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,target-densitydpi=device-dpi">
		<script src="./rem-bank/hm.js">
		</script>
		<script src="./rem-bank/adaptive.js"></script>
		<link rel="stylesheet" href="./rem-bank/iosSelect.css">
		<style>
			button {
				height: 150px;
				width: 500px;
				font-size: 60px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button v-on:click="showBank()">选择银行</button>
			<p>id: {{id}}</p><br />
			<p>value: {{value}}</p>
		</div>

		<script>
			new Vue({
				el: '#app',
				data: {
					id: 0,
					value: 0
				},
				methods: {
					showBank: function() {
						var _vue = this;
						var data = [{
								"id": "130000",
								"value": "北京",
								"parentId ": "0"
							},
							{
								"id": "130001",
								"value": "河北省",
								"parentId ": "1"
							}
						];
						var bankSelect = new IosSelect(1,
							[data], {
								title: '银行卡选择',
								//oneLevelId: id,
								itemHeight: 3.7,
								headerHeight: 10.88,
								itemShowCount: 3,
								cssUnit: 'rem',
								callback: function(selectOneObj) {
									console.log(selectOneObj);
									_vue.id = selectOneObj.id;
									_vue.value = selectOneObj.value;
								}
							});
					}
				}
			})
		</script>
	</body>
	<script src="./rem-bank/bank.js"></script>
	<script src="./rem-bank/iosSelect.js"></script>
</html>
